<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../../../src/base/_core.js"></script>
    <script type="text/javascript" src="../../../src/base/string.js"></script>
    <script type="text/javascript" src="../../../src/client/env.js"></script>
</head>
<body>

<div id="div1" style="border: 5px solid #f00; width:200px; height: 300px; position:absolute; left:30px; top:200px;">
    <div id="div1_out" style="position:absolute;width:30px; border: 4px solid #ff0; height: 30px;">
        <div id="div1_in"
             style="width:20px; margin-left: 20px;; height: 30px; position:absolute; left:10px; top:20px; border: 2px solid #333;">

        </div>
    </div>


</div>
<div id="div2"
     style="border: 5px solid #f00; margin:40px 30px 30px 200px; width:200px; height: 300px; position:absolute; left:10px; top:200px;"></div>

<script type="text/javascript">
    //取得元素x坐标
    function pageX(elem) {
        return elem.offsetParent ? (elem.offsetLeft + pageX(elem.offsetParent)) : elem.offsetLeft;
    }
    //取得元素y坐标
    function pageY(elem) {
        return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
    }
    function pageX2(el) {
        var getBorder = function (elem, direction) {
            return parseFloat(getComputedStyle(elem).getPropertyValue('border-' + direction + '-width'));
        };
        var parentNode;
        if (parentNode = el.offsetParent) {
            return el.offsetLeft + pageX2(parentNode) + getBorder(parentNode, 'left');
        } else {
            return el.offsetLeft;
        }
    }
    var div1 = document.getElementById('div1');
    var div1_in = document.getElementById('div1_in');
    var div1_out = document.getElementById('div1_out');
    var div2 = document.getElementById('div2');

    (function (line, browser, document, window) {
        function getBorder(element, direction) {
            var result = parseFloat(getComputedStyle(element).getPropertyValue('border-' + direction + '-width'));
            if (browser.firefox) {
                if (/^t(?:able|d|h)$/i.test(element.tagName)) {
                    result = 0;
                }
            }
            return result;
        }

        function getPageXY(element, direction) {
            var parentNode,
                    offsetMethod = 'offset' + line.capitalize(direction);
            if (parentNode = element.offsetParent) {
                return element[offsetMethod] + getPageXY(parentNode, direction) + getBorder(parentNode, direction);
            } else {
                return element[offsetMethod];
            }
        }

        var ln = {
            getDoc:function (element) {
                return element.ownerDocument || document;
            },
            getXY:function (element) {
                return {
                    left:getPageXY(element, 'left'),
                    top:getPageXY(element, 'top')
                };
            },
            getXY2:(function () {
                function getBorder(element, direction) {
                    var result = parseFloat(getComputedStyle(element).getPropertyValue('border-' + direction + '-width'));
                    if (browser.firefox) {
                        if (/^t(?:able|d|h)$/i.test(element.tagName)) {
                            result = 0;
                        }
                    }
                    return result;
                }

                function getPageXY(element, direction) {
                    var parentNode,
                            offsetMethod = 'offset' + line.capitalize(direction);
                    if (parentNode = element.offsetParent) {
                        return element[offsetMethod] + getPageXY(parentNode, direction) + getBorder(parentNode, direction);
                    } else {
                        return element[offsetMethod];
                    }
                }

                return function (element) {
                    return {
                        left:getPageXY(element, 'left'),
                        top:getPageXY(element, 'top')
                    };
                };
            }())
        };
        window.ln = ln;
    }(line, line.browser, document, window));

    /**
     * getXY这城有个需要讨论一下：
     * getXY
     * getXY2
     * 这两种写法都可以达到目的
     * getXY有个好处：代码清晰，getBorder/getPageXY都是在外面大的闭包环境下，可以达到函数只运行一次的目的
     * getXY2看起来代码没有上面那么清晰，但有个好处，getBorder/getPageXY只有这个getXY2才会用到
     * 所以，封闭起来，感觉更独立，更成一体。
     */
</script>



</body>
</html>